<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/echarts.js"></script>
    <script src="../js/hookEcharts.js"></script>
    <style>
        .line-wrap div {
            float: left;
        }
    </style>
</head>

<body>
    <div class="line-wrap">
        <div class="line1" style="width: 190px;height:160px;"></div>
        <div class="line2" style="width: 190px;height:160px;"></div>
        <div class="line3" style="width: 190px;height:160px;"></div>
        <div class="line4" style="width: 190px;height:160px;"></div>
        <div class="line5" style="width: 190px;height:160px;"></div>
        <div class="line6" style="width: 190px;height:160px;"></div>
    </div>
    <script>
        var lines = document.querySelectorAll('.line-wrap div');
        var optionSet1 = {
            grid: {
                // 是否显示直角坐标系的网格  true/false
                // show: true,
                // 放置溢出
                containLabel: true,
                // left:图标距离容器左侧的距离  百分比/number
                // left: '10%',
                // right: '20%',
                bottom: '10%',
                top: '10%'

            },
            xAxis: {
                // 值
                type: 'category',
                data: [0, 6, 12, 18, 24]
            },
            yAxis: {
                // 类目
                type: 'value'
            },
            series: [
                {
                    data: [0, 200, 700, 500, 20],
                    type: 'line'
                }
            ]
        };
        var optionSet2 = {
            grid: {
                // 放置溢出
                containLabel: true,
                bottom: '10%',
                top: '10%'

            },
            xAxis: {
                // 值
                type: 'category',
                data: [0, 6, 12, 18, 24]
            },
            yAxis: {
                // 类目
                type: 'value'
            },
            series: [
                {
                    data: [120, 200, 150],
                    type: 'line'
                }
            ]
        };
        var optionSet3 = {
            grid: {
                // 放置溢出
                containLabel: true,
                bottom: '10%',
                top: '10%'

            },
            xAxis: {
                // 值
                type: 'category',
                data: [0, 6, 12, 18, 24]
            },
            yAxis: {
                // 类目
                type: 'value'
            },
            series: [
                {
                    data: [120, 200, 150],
                    type: 'line'
                }
            ]
        };
        var optionSet4 = {
            grid: {
                // 放置溢出
                containLabel: true,
                bottom: '10%',
                top: '10%'

            },
            xAxis: {
                // 值
                type: 'category',
                data: [0, 6, 12, 18, 24]
            },
            yAxis: {
                // 类目
                type: 'value'
            },
            series: [
                {
                    data: [120, 200, 150],
                    type: 'line'
                }
            ]
        };
        var optionSet5 = {
            grid: {
                // 放置溢出
                containLabel: true,
                bottom: '10%',
                top: '10%'

            },
            xAxis: {
                // 值
                type: 'category',
                data: [0, 6, 12, 18, 24]
            },
            yAxis: {
                // 类目
                type: 'value'
            },
            series: [
                {
                    data: [120, 200, 150],
                    type: 'line'
                }
            ]
        };
        var optionSet6 = {
            grid: {
                // 放置溢出
                containLabel: true,
                bottom: '10%',
                top: '10%'

            },
            xAxis: {
                // 值
                type: 'category',
                data: [0, 6, 12, 18, 24]
            },
            yAxis: {
                // 类目
                type: 'value'
            },
            series: [
                {
                    data: [120, 200, 150],
                    type: 'line'
                }
            ]
        };
        echartsUtils(lines[0], optionSet1)
        echartsUtils(lines[1], optionSet2)
        echartsUtils(lines[2], optionSet3)
        echartsUtils(lines[3], optionSet4)
        echartsUtils(lines[4], optionSet5)
        echartsUtils(lines[5], optionSet6)

    </script>
</body>

</html>